/* ============================================================
   ods_table.css — ODS テーブル表示用スタイル
   STAR-PRIMER 用
   ============================================================ */

/* --- レスポンシブラッパー --- */
.ods-table-wrap {
  overflow-x: auto;         /* 横スクロール対応 */
  -webkit-overflow-scrolling: touch;
  margin: 1.5em auto;          /* 左右autoでセンタリング */
}

/* --- テーブル本体 --- */
.ods-table {
  margin-left: auto;           /* テーブル本体もセンタリング */
  margin-right: auto;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: "メイリオ", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  table-layout: fixed;      /* colgroup の幅指定を厳密に適用 */
}

/* --- キャプション --- */
.ods-table caption {
  caption-side: top;
  text-align: center;
  font-weight: bold;
  font-size: 1em;
  padding: 0.4em 0;
  color: #333;
}

/* --- セル共通 --- */
.ods-table th,
.ods-table td {
  border: 1px solid #999;
  padding: 4px 6px;
  vertical-align: middle;
  word-break: break-all;     /* 長いテキストの折返し */
  overflow: hidden;
}

/* --- データ行の高さを統一（2行分確保） ---
   height はテーブルセルでは min-height として機能する。
   折り返しが発生しても他の行と高さが揃い、レイアウトが崩れない。 */
.ods-table tbody td {
  height: 2.8em;
}

/* --- ヘッダー行（thead 内） --- */
.ods-table thead th {
  font-weight: bold;
  text-align: center;
}

/* --- 偶数行ストライプ --- */
.ods-table .ods-row-even td {
  background-color: #f0f0f0;
}

/* --- エラー表示 --- */
.ods-error {
  color: #c00;
  font-weight: bold;
  padding: 1em;
  border: 1px solid #c00;
  background: #fff0f0;
}

/* ============================================================
   レスポンシブ対応
   ============================================================ */

/* 768px以下：フォントを縮小 */
@media screen and (max-width: 768px) {
  .ods-table {
    font-size: 12px;
  }

  .ods-table th,
  .ods-table td {
    padding: 3px 4px;
  }
}

/* 480px以下：さらに縮小 */
@media screen and (max-width: 480px) {
  .ods-table {
    font-size: 10px;
  }

  .ods-table th,
  .ods-table td {
    padding: 2px 3px;
  }
}